<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>仓库详情页</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=yes"/>
	<!--标准mui.css-->
	<link rel="stylesheet" href="__PUBLIC__/css/mui.min.css">
	<!--&lt;!&ndash;App自定义的css&ndash;&gt;-->
	<!--<link rel="stylesheet" type="text/css" href="../../css/app.css" />-->
	<script src="__PUBLIC__/js/mui.min.js"></script>
	<script src="__PUBLIC__/js/jquery-3.2.1.min.js"></script>
	<style>
		.cangku-box p{margin-top: 5px;margin-bottom: 5px;font-size: 12px}

		.ck-input{display: flex;justify-content: center;align-items: center;margin-bottom: 10px}

		.cl2 {
			color: #222 !important;
		}
		.cangkuinfo-title {
			line-height: 25px;
		}
		.mui-zuobiao {
			width: 100px;
			height: 100px;
			position: relative;
			color: #8f8f94;
		}
		.mui-ckjj-icon {
			background-position: 0px -1px;
		}
		.mui-ck-je span {
			margin-left: 30px;
		}
		.mui-kongx-icon {
			background-position: -30px 1px;
		}
		.mui-ck-icon {
			width: 30px;
			height: 35px;
			background: url(__PUBLIC__/images/bizimg/ckinfo.png) no-repeat;
			position: absolute;
			background-size: 300%;
		}
		.cangku-box {
			font-size: 14px;
			font-weight: 400;
			line-height: 1.42;
			position: relative;
			display: inline-block;
			margin-bottom: 0;
			padding: 6px 12px;
			cursor: pointer;
			-webkit-transition: all;
			transition: all;

			-webkit-transition-timing-function: linear;
			transition-timing-function: linear;
			-webkit-transition-duration: .2s;
			transition-duration: .2s;
			text-align: center;
			vertical-align: top;
			white-space: nowrap;
			color: #333;
			border: 1px solid #ccc;
			border-radius: 3px;
			border-top-left-radius: 3px;
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
			border-bottom-left-radius: 3px;
			background-color: #fff;
			background-clip: padding-box;
			margin-right: 17px;
			margin-bottom: 15px;
		}
		.cangku-box{padding: 0 5px;margin: 0 auto;}
		.mui-pl-icon {
			background-position: -60px 1px;
		}
		.mui-ck-icon {
			width: 30px;
			height: 35px;
			background: url(__PUBLIC__/images/bizimg/ckinfo.png) no-repeat;
			position: absolute;
			background-size: 300%;
		}
		.ml30 {
			margin-left: 30px;
		}
		.ck-hw em {
			font-style: normal;
			float: right;
			margin-right: 5px;
			color: #8f8f94;
		}
		.ck-input {
			width: 33%;
			float: left;
		}
		.ck-hw {
			width: 93%;
			margin: 10px auto;
			display: flow-root;
		}
		.mui-zuobiao i {
			width: 25px;
			height: 25px;
			background: url(__PUBLIC__/images/bizimg/zuobiao.png);
			background-size: 100%;
			float: left;
			position: absolute;
			top: 8px;
			left: -25px;
		}
		.mt15 {
			margin-top: 15px !important;
		}
		.zwbg {
			background: #f5f5f5;
			height: 10px;
			width: 100%;
		}
	</style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
	<a onclick="dump('{:U("Time/lists")}')" style="color: black" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<script>
        //url跳转
        function dump(url) {
            location.href=url
        }
	</script>
	<h1 class="mui-title">仓库详情页</h1>
	<button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right cl2"><a style="color: black" href="tel:{:I('tel')}">联系电话</a></button>
</header>

<div id="slider" class="mui-slider">
	<div class="mui-slider-group mui-slider-loop">
		<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
		<div class="mui-slider-item mui-slider-item-duplicate">
			<if condition="count($data[Photo]) lt 1">
				<a href="#">
					<img style="width: 100px" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1520499850&di=26f51269208ef156a31432fe14a1c4dd&src=http://pic.yesky.com/uploadImages/2015/030/55/286WIRZR229C.JPEG">
				</a>
			</if>
			<foreach name="data.Photo" item="vo">
			<a href="#">
				<img style="width: 100px" src="{$vo.PIC}">
			</a>
			</foreach>
		</div>
	</div>
	<div class="mui-slider-indicator" style="display: none">
		<div class="mui-indicator mui-active"></div>
		<div class="mui-indicator"></div>
		<div class="mui-indicator"></div>
		<div class="mui-indicator"></div>
	</div>
</div>
<ul class="mui-table-view">
	<li class="mui-table-view-cell mui-media">
		<a href="javascript:;">
			<div class="mui-media-object mui-pull-right mui-zuobiao">
				<i></i>
				<span><php>echo round($data['Distance'],1);</php>KM</span>
			</div>

			<div class="mui-media-body cangkuinfo-title">
				<i>{$data.Name}</i>
				<p class="mui-ellipsis">{$data.Addr}</p>
			</div>
		</a>
	</li>
</ul>
<div class="zwbg"></div>
<ul class="mui-table-view">
	<li class="mui-table-view-cell mui-media">

		<div class="mui-media-body cangkuinfo-title pr mui-ck-je">
			<i class="mui-ck-icon mui-ckjj-icon"></i><span>仓库简介</span>
		</div>
		<p>{$data.Intro}</p>

	</li>
</ul>
<div class="mui-table-view ck-hw">

	<div class="mui-media-body cangkuinfo-title pr mui-ck-je">
		<i class="mui-ck-icon mui-kongx-icon"></i><span>选择空闲仓库货位</span>
	</div>

	<div class="mt15 ck-hw" >
		<foreach name="data.Spec" item="vo">
		<div _class="t" _id="{$vo.ID}" _time="{$vo.Area}" class="ck-input">
			<div class="cangku-box">
				<p>{$vo.Area}(单位cm²)</p>
				<p>￥{$vo.Price}</p>
			</div>
		</div>
		</foreach>
	</div>
</div>
<div class="ck-hw" style="float: left;margin-left: 0.9em">
	<div class="mui-media-body cangkuinfo-title pr ">
		<i class="mui-ck-icon mui-pl-icon"></i><span class="ml30">评论列表</span>
		<em>{$data.CommTotal}条评论</em>
	</div>
</div>
<input type="hidden" id="cangku" value="{$cangku}"/>

<script>
    var oImgBox = $(".mui-slider-group");   //包裹图片的盒子
    var num = $(".mui-slider-group").children().length;   //图片的个数
    if(num > 1){
        $(".mui-slider-indicator").show();
        mui.init({
            swipeBack:true //启用右滑关闭功能
        });
        var slider = mui("#slider");
        slider.slider({
            interval: 2000         //每隔5秒调用一次
        });
    }
</script>
<script>
	$(function () {
        $('[_class="t"]').click(function () {
			var id = $(this).attr('_id')
			var time  = $(this).attr('_time')
			var cangku = $('#cangku').val()
			var tel = "<?php echo I('tel');?>"
			location.href = '/index.php?g=YunCangChu&m=Time&a=yuyue&id='+id+"&time="+time+"&cangku="+cangku+"&tel="+tel;
        })

    })
</script>
</body>

</html>